<style lang="less">
    @import '../../../styles/common.less';
    @import './table.less';
</style>

<template>
    <div>
        <Row class="margin-top-10">
            <Col span="24" class="padding-left-10">
            <Card>
                <p>
                    <Icon type="clipboard"></Icon>
                    枸杞
                </p>
                <Table stripe border refs="table2" :columns="columnsList" :data="tableData"></Table>
                <Button long type="info" @click="add" size="large">添加</Button>
            </Card>
            </Col>
        </Row>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                columnsList: [],
                tableData: [],
            };
        },
        methods: {
            getData() {
                this.columnsList = [
                    {
                        title: '序号',
                        type: 'index',
                        width: 80,
                        align: 'center'
                    },
                    {
                        title: '生育期名称',
                        width: 100,
                        key: 'name'
                    },
                    {
                        title: '时间（天）',
                        width: 100,
                        key: 'days',
                        align: 'center'
                    },
                    {
                        title: '描述',
                        key: 'remarks',
                        align: 'center'
                    },
                    {
                        title: '图片',
                        width: 150,
                        key: 'images',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', {}, [
                                h('img', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    attrs: {
                                        src: params.row.images, style: 'width: 40px;height: 40px;border-radius: 2px;'
                                    },
                                    style: {}
                                })
                            ]);
                        }
                    },
                    {
                        title: '操作',
                        align: 'center',
                        width: 200,
                        key: 'handle',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.edit(params)
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.delete(params)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ];
                this.tableData = [
                    {
                        name: '生育期一',
                        days: 20,
                        remarks: '生育期一',
                        images: 'http://gb.cri.cn/mmsource/images/2014/06/06/49/2593136740881584265.jpg'
                    },
                    {
                        name: '生育期一',
                        days: 20,
                        remarks: '生育期一',
                        images: 'http://gb.cri.cn/mmsource/images/2014/06/06/49/2593136740881584265.jpg'
                    },
                    {
                        name: '生育期一',
                        days: 20,
                        remarks: '生育期一',
                        images: 'http://gb.cri.cn/mmsource/images/2014/06/06/49/2593136740881584265.jpg'
                    }
                ];
            },
            edit: function (params) {
                this.$router.push("growth_cycle_detail")
            },
            delete: function (params) {
                this.$Message.success("删除")
                this.tableData.splice(params.index, 1)

            },
            add:function () {
                this.$router.push("growth_cycle_detail")
            }
        },
        created() {
            // 可在此从服务端获取表格数据
            this.getData();
        }
    };
</script>
